<template>
  <div id="in">
      <table height="100px"><tr>
      <td style="width: 180px" >
        <div align='right'><el-avatar
         class="md_headpic"
         shape="square"
         :size="90"
         src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
         @error="errorHandler">
         <img :src="error_url" />
     </el-avatar>
        </div></td>
     <td style="width: 250px">
       <div class="usename" align='left'><span style="font-size:23px;font-weight:500;">{{myinfo.username}}用户您好</span></div></td>
       </tr>
      </table>
 <el-divider id="topdivider"></el-divider>
  </div>
 <div class="information">
    <div class="myinfotitle">我的信息
      <el-button type="primary" plain @click="handleEdit()" size="mini">编辑</el-button>

      <el-dialog
        title="提示"
        v-model="dialogVisible"
        width="50%"
        :before-close="handleClose">
        <!----------------->
        <el-form :model="resetmyinfo" label-width="70px">
                
                <el-form-item label="手机号">
                <el-input v-model="resetmyinfo.phone_num"></el-input>
                </el-form-item>
                <el-form-item label="用户名" >
                <el-input v-model="resetmyinfo.username"></el-input>
                </el-form-item>
            </el-form>
        <!-------------------->
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">修改手机号</el-button>
            <el-button type="primary" @click="dialogVisible = false">修改用户名</el-button>
          </span>
        </template>
      </el-dialog>

    </div>
    <el-divider id="bottomdivider"></el-divider>
  <el-descriptions >
    <el-descriptions-item label="用户ID:"><span>{{myinfo.id}}</span></el-descriptions-item>
    <el-descriptions-item label="手机号:"><span>{{myinfo.phone_num}}</span></el-descriptions-item>
    <el-descriptions-item label="是否为vip:"><span>{{myinfo.vip}}</span></el-descriptions-item>
    <el-descriptions-item label="用户名:"><span>{{myinfo.username}}</span></el-descriptions-item>
    <el-descriptions-item label="信用值:"><span>{{myinfo.credit}}</span></el-descriptions-item>
  </el-descriptions>
 
  </div>
  
</template>

<script lang="ts">
import { defineComponent, ref, reactive, provide, watch, onMounted } from 'vue';
import store from '@/router/index';
import axios from 'axios';
import {Myinfo} from '@/utils/api/myinfo';

export default defineComponent({
    name:'Middle',
    setup(){
    const dialogVisible= ref(false);
    let myinfo = reactive({
        id:'',
        username:'',
        vip:'',
        credit:'',
        phone_num:'',
      })
    let resetmyinfo = reactive({
       username:'',
       phone_num:'',
    });
    const requestTry = () => {
        Myinfo.searchMyinfo().then((res) => {
          if(res.data.status==='200'){
          console.log(res);
          myinfo.id=res.data[3];
          //resetmyinfo.username=res.data[0];
          myinfo.phone_num=res.data[1];
          //resetmyinfo.phone_num=res.data[1];
          myinfo.vip=res.data[4];
          myinfo.username=res.data[0];
          myinfo.credit=res.data[2];}
        }).catch((error) => {
          console.log(error);
        });
    };
    const handleEdit=()=>{
    dialogVisible.value = true;
    }
    onMounted(()=>{ console.log('setup, mounted1')});
      return {
        requestTry,myinfo,dialogVisible,handleEdit,resetmyinfo
      }
    },
    mounted:function () {
      this.requestTry();
     }
})
</script>

<style lang='scss' scoped>
.information{
  margin-top: 50px;
  padding-top: 20px;
  padding-bottom: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  color:rgb(90,165,240);
}
.myinfotitle{
  height: 50px;
  line-height:80px;
  text-align: left;
  padding-left: 50px;
  font-size:20px;
}
#bottomdivider{
  height: 0.07px;
  line-height: 0.07px;
  width: 630px;
  margin-left: 60px;
}
.el-descriptions{
  margin-top: 20px;
  padding-left: 60px;
  padding-right: 60px;
  padding-bottom: 10px;
 
}
.el-button{
  margin-left:500px;
}
#in{
  margin-top: 40px;
  height: 130px;
  line-height: 130px;
  background-color: rgb(251,251,251);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.md_headpic{
  vertical-align: middle;
}
.vip{
  margin-top: 20px;
  color:rgb(90,165,240);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.viptitle{
  height: 50px;
  line-height:80px;
  text-align: left;
  padding-left: 50px;
  font-size:20px;
}
.vipcontent{
  height:30px;
  line-height:30px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;}
.text {
  font-size: 14px;}
.item {
  margin-bottom: 18px;}
.box-card {
  width: 480px;}
</style>